import React from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Breadcrumb } from 'antd';
import LittleChart from '../../components/Chart/Little'
import PillarChart from '../../components/Chart/PillarChart'
import AreaChart from '../../components/Chart/Area'

const opreate=[
    {
        title:'会员管理',
        icon:'iconfont icon-geren',
        color:'#f00'
    },{
        title:'系统设置',
        icon:'iconfont icon-shezhi1',
        color:'purple'
    },{
        title:'商品',
        icon:'iconfont icon-youhuiquan-01',
        color:'skyblue'
    },{
        title:'订单管理',
        icon:'iconfont icon-wodedingdan',
        color:'purple'
    },{
        title:'短信配置',
        icon:'iconfont icon-xiaoxi',
        color:'skyblue'
    },{
        title:'文章管理',
        icon:'iconfont icon-wenjian',
        color:'pink'
    },{
        title:'分销管理',
        icon:'iconfont icon-wenjian',
        color:'orange'
    },{
        title:'优惠券',
        icon:'iconfont icon-qiaquan',
        color:'orangered'
    }
]
const Workbench = (props) => {
    
    return (
        <div className={style.workbench}>
            {/* 面包屑导航 */}
            <div className={style.head}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                      <i className='iconfont icon-gengduo-2'></i>  主页
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.workmain}>
                <div>
                  <LittleChart 
                    title="销售额"
                    numChat="总销售额 121947.25元"
                  />
                  <LittleChart 
                    title="用户访问"
                    numChat="总访问量 504PV"
                  />
                  <LittleChart 
                    title="订单量"
                    numChat="总销售额 125单"
                  />
                  <LittleChart 
                    title="新建用户"
                    numChat="总用户 516人"
                  />
                </div>
                <div className={style.workmainNav}>
                {
                    opreate.map((item,ind)=><div key={ind} className={style.opreat}>
                    <i className={item.icon} style={{color:item.color,fontSize:'24px'}}></i>
                    <p>{item.title}</p>
                    </div>)
                }
                </div>
                <div>
                    <PillarChart />
                    <AreaChart />
                </div>
            </div>
        </div>
    );
}

export default connect((state) => {
    return {

    }
})(Workbench);
